<template>
  <div class="dashboard-container">
    <!-- 头部标题 -->
    <header class="dashboard-header">
      <h1>Taylor Swift 官方网站 - 第十章</h1>
    </header>

    <div class="dashboard-main">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <nav class="navigation">
          <router-link to="/">首页</router-link>
          <router-link to="/page-one">第一章</router-link>
          <router-link to="/page-two">第二章</router-link>
          <router-link to="/page-three">第三章</router-link>
          <router-link to="/page-four">第四章</router-link>
          <router-link to="/page-five">第五章</router-link>
          <router-link to="/page-six">第六章</router-link>
          <router-link to="/page-seven">第七章</router-link>
          <router-link to="/page-eight">第八章</router-link>
          <router-link to="/page-nine">第九章</router-link>
          <router-link to="/page-ten">第十章</router-link>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="btn" @click="backHandler">⬅ 后退</button>
          <button class="btn" @click="forwardHandler">前进 ➡</button>
          <button class="btn" @click="goHandler">跳步 -2</button>
          <button class="btn btn-primary" @click="pushHandler">Push 新页面</button>
          <button class="btn btn-warning" @click="replaceHandler">Replace 当前页</button>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageTen",
  methods: {
    backHandler() {
      this.$router.go(-1);
    },
    forwardHandler() {
      this.$router.go(1);
    },
    goHandler() {
      this.$router.go(-2);
    },
    pushHandler() {
      this.$router.push("/l");
    },
    replaceHandler() {
      this.$router.replace("/l");
    }
  }
};
</script>

<style scoped>
.dashboard-header {
  background-color: #2c3e50;
  color: white;
  padding: 15px 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-main {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 220px;
  background-color: #f4f4f4;
  border-right: 1px solid #ddd;
  padding: 20px;
  overflow-y: auto;
}

.navigation a {
  margin-bottom: 10px;
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s ease;
  display: block;
}

.navigation a:hover,
.navigation a.router-link-exact-active {
  background-color: #008083;
  color: white;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn-primary {
  background-color: #42b983;
  color: white;
}

.btn-warning {
  background-color: #f39c12;
  color: white;
}
</style>